import React, {useState, useEffect } from "react";

// 引入 ECharts 主模块
import * as echarts from "echarts";
export default function BarEchart(props) {
  useEffect(() => {
    let xData=Object.keys(props.barData)
    let yData=Object.values(props.barData)
    // console.log(yData);
    var chartDom = document.getElementById("main");
    var myChart
    // if(myChart!=null && myChart!=''&&myChart!=undefined){
    //   myChart.dispose()
    // }
    myChart = echarts.init(chartDom);
    var option;

    // prettier-ignore
    let dataAxis =xData;
    // prettier-ignore
    let data = yData
    let yMax = 500;
    let dataShadow = [];
    for (let i = 0; i < data.length; i++) {
      dataShadow.push(yMax);
    }
    option = {
      title: {
        text: "每日订单",
      },
      xAxis: {
        data: dataAxis,
        axisLabel: {
          inside: true,
          color: "#fff",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        z: 10,
      },
      yAxis: {
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#999",
        },
      },
      dataZoom: [
        {
          type: "inside",
        },
      ],
      series: [
        {
          type: "bar",
          showBackground: true,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#83bff6" },
              { offset: 0.5, color: "#188df0" },
              { offset: 1, color: "#188df0" },
            ]),
            normal: {
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#188df0",
                  fontSize: 12,
                },
              },
            },
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#2378f7" },
                { offset: 0.7, color: "#2378f7" },
                { offset: 1, color: "#83bff6" },
              ]),
            },
          },
          data: data,
        },
      ],
    };
    // Enable data zoom when user click bar.
    const zoomSize = 6;
    myChart.on("click", function (params) {
      myChart.dispatchAction({
        type: "dataZoom",
        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
        endValue:
          dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
      });
    });

    option && myChart.setOption(option);
    setTimeout(function () {
      window.onresize = function () {
        myChart.resize();
      };
    }, 200);
  }, [props]);
  return <div id="main" style={{ width: "100%", height: 400 }}></div>;
}
